<template>
	<view >
		<u-navbar
			title="上拉菜单"
			@leftClick="navigateBack"
			safeAreaInsetTop
			fixed
			placeholder
		></u-navbar>
		<u-cell-group>
			<u-cell
				@click="openSheet(index)"
				:title="item.title"
				v-for="(item, index) in list"
				:key="index"
				isLink
			>
				<template #icon>
					<image class="u-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
				</template>
			</u-cell>
            <u-cell title="使用触发器">
                <template v-slot:value>
					<u-action-sheet :actions="actions0" @select="select2">
						<u-input
							:value="value0"
							placeholder="请选择"
							disabled-color="#fff"
							disabled
							clearable
						/>
                    </u-action-sheet>
                </template>
			</u-cell>
			<u-cell title="使用js打开" @click="openActionSheet">
                <template v-slot:value>
                    <u-action-sheet ref="actionSheetRef" :actions="actions0" @select="select1"></u-action-sheet>
                </template>
            </u-cell>
		</u-cell-group>
		<u-action-sheet
			:show="show0"
			@close="close"
			@select="select"
			:actions="actions0"
			:closeOnClickOverlay="false"
		>
		</u-action-sheet>
		<u-action-sheet
			:show="show1"
			@close="show1 = false"
			:actions="actions1"
		>
		</u-action-sheet>
		<u-action-sheet
			:show="show2"
			@close="show2 = false"
			:actions="actions2"
			cancelText="取消"
		>
		</u-action-sheet>
		<u-action-sheet
			:show="show3"
			@close="show3 = false"
			:actions="actions3"
			description="这是一段描述文本,字号偏小,颜色偏淡"
		>
		</u-action-sheet>
		<u-action-sheet
			:show="show4"
			@close="show4 = false"
			title="标题位置"
			:round="10"
		>
			<text style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px;">这是一段通过slot传入的内容,您可以在此自定义操作面板</text>
		</u-action-sheet>
		<u-action-sheet
			:show="show5"
			@close="show5 = false"
			title="微信开放能力"
			:actions="actions5"
			@getuserinfo="getuserinfo"
		></u-action-sheet>
		<u-action-sheet
			:show="show6"
			@close="show6 = false"
			title="超出滚动"
			:closeable="true"
			:actions="actions6"
			:height="300"
		></u-action-sheet>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show0: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				value0: '',
				actions0: [{
						name: '选项1',
					},
					{
						name: '选项2',
					},
					{
						name: '选项3',
						subname: '描述文本'
					},
				],
				actions1: [{
						name: '选项1',
					},
					{
						loading: true
					},
					{
						name: '选项被禁用',
						disabled: true
					},
				],
				actions2: [{
						name: '选项1',
					},
					{
						name: '选项2',
					},
					{
						name: '选项3',
					},
				],
				actions3: [{
						name: '选项1',
					},
					{
						name: '选项2',
					},
					{
						name: '选项3',
					},
				],
				actions5: [{
					name: '获取用户信息',
					openType: 'getUserInfo',
					color: '#ccc'
				}],
				actions6: [{
					name: '选项1',
					},
					{
						name: '选项2',
					},
					{
						name: '选项3',
					},
					{
						name: '选项4',
					},
					{
						name: '选项5',
					},
					{
						name: '选项6',
					},
					{
						name: '选项7',
					},
					{
						name: '选项8',
					},
					{
						name: '选项9',
					},
					{
						name: '选项10',
					},
					{
						name: '选项11',
					},
					{
						name: '选项12',
					}
				],	
				list: [{
						title: '普通使用',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/custom.png'

					},
					{
						title: '设置状态',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/status.png'
					},
					{
						title: '显示取消按钮',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/cancel.png'
					},
					{
						title: '描述内容',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/desc.png'
					},
					{
						title: '显示标题(显示圆角)',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/title.png'
					},
					{
						title: '微信开放能力',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/open.png'
					},
					{
						title: '超出滚动',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/open.png'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 点击cell，判断显示哪个功能
			openSheet(index) {
				// #ifndef MP
				if (index === 5) return uni.$u.toast('请在微信内预览')
				// #endif
				this[`show${index}`] = true
			},
			getuserinfo(res) {
				uni.$u.toast(`用户名：${res.userInfo.nickName}`)
			},
			navigateBack() {
				uni.navigateBack()
			},
			close() {
				console.log('close');
				this['show0'] = false
			},
			openActionSheet(){
				this.$refs.actionSheetRef.open()
			},
			select(e) {
				console.log('select', e);
			},
			select1(e) {
				console.log('select1', e);
				this.$refs.actionSheetRef.close()
				uni.$u.toast(`已选择：${e.name}`)
			},
			select2(e) {
				this.value0 = e.name
				console.log('select2', e);
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}
</style>
